<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字展厅</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 方向示例（右上角指南针SVG） -->
    <div id="direction-indicator">
      <div class="compass">
        <span class="label label-n">北</span>
        <span class="label label-e">东</span>
        <span class="label label-s">南</span>
        <span class="label label-w">西</span>
        <svg class="compass-svg" width="36" height="36" viewBox="0 0 36 36">
          <g class="compass-needle">
            <!-- 北：红色三角 -->
            <polygon points="18,5 12,18 24,18" fill="#d00" />
            <!-- 南：蓝色三角 -->
            <polygon points="18,31 12,18 24,18" fill="#06c" />
          </g>
        </svg>
      </div>
    </div>
    <div id="container"></div>
    <div id="loading">加载中...</div>

    <!-- 设置按钮 -->
    <button id="settings-btn" style="position:fixed;right:30px;bottom:30px;z-index:10001;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.13);border:none;cursor:pointer;font-size:22px;">⚙️</button>
    <!-- 设置弹窗 -->
    <div id="settings-modal" style="display:none;position:fixed;right:40px;bottom:90px;z-index:10002;background:#fff;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,0.18);padding:24px 32px 18px 32px;min-width:220px;">
      <div style="font-size:18px;font-weight:bold;margin-bottom:16px;">参数配置</div>
      <label style="display:flex;align-items:center;gap:8px;font-size:15px;">
        <span style="margin-right:8px;">是否显示人物</span>
        <label class="switch">
          <input type="checkbox" id="toggle-avatar" />
          <span class="slider"></span>
        </label>
      </label>
      <div style="margin-top:18px;text-align:right;">
        <button id="settings-close" style="padding:4px 18px;font-size:15px;border-radius:6px;border:none;background:#eee;cursor:pointer;">关闭</button>
      </div>
    </div>
    
    <div id="info-panel" class="hidden">
        <div class="info-content">
            <span class="close-btn">&times;</span>
            <div class="artwork-details">
                <h2 id="artwork-title"></h2>
                <img id="artwork-image" src="" alt="">
                <p id="artwork-description"></p>
            </div>
        </div>
    </div>

    <!-- Three.js库 -->
    <!-- <script src="https://unpkg.com/three@0.146.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script> -->
    
    <!-- 自定义脚本 -->
    <!-- <script src="lib/fflate.min.js"></script>
    <script src="lib/FBXLoader.js"></script> -->
    <!-- <script type="module" src="js/data.js"></script> -->
    <script type="module" src="js/main.js"></script>
    <style>
      #direction-indicator {
        position: fixed;
        top: 20px;
        right: 30px;
        z-index: 9999;
        width: 80px;
        height: 80px;
        pointer-events: none;
      }
      .compass {
        position: relative;
        width: 80px;
        height: 80px;
        border: 2px solid #333;
        border-radius: 50%;
        background: rgba(255,255,255,0.85);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      }
      .compass-svg {
        display: block;
        width: 36px;
        height: 36px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        pointer-events: none;
      }
      .compass-needle {
        transition: transform 0.1s linear;
        transform-origin: 18px 18px;
      }
      .compass .label {
        position: absolute;
        font-size: 13px;
        color: #333;
        font-weight: bold;
        user-select: none;
        pointer-events: none;
      }
      .label-n { left: 50%; top: 6px; transform: translateX(-50%); }
      .label-e { right: 6px; top: 50%; transform: translateY(-50%); }
      .label-s { left: 50%; bottom: 6px; transform: translateX(-50%); }
      .label-w { left: 6px; top: 50%; transform: translateY(-50%); }
      .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
      }
      .switch input { display: none; }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 24px;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.13);
      }
      .switch input:checked + .slider {
        background-color: #4caf50;
      }
      .switch input:checked + .slider:before {
        transform: translateX(20px);
      }
    </style>
</body>
</html> 